<template>
  <div class="custom-tab-bar">
    <div class="tab-item" :class="tabIndex==index && 'active'" v-for="(item,index) in tabBars" @click="switchTab(item.path)">
			{{item.name}}
		</div>
  </div>
</template>

<script>
export default {
	props: {
		tabIndex: {
			type: String,
			default: 0,
		},
	},
	data() {
		return{
			tabBars: [
				{
					name: "监测",
					path: "/pages/index/index",
				},
				{
					name: "预警",
					path: "/pages/warning/warning",
				},
				{
					name: "搜索",
					path: "/pages/globalsearch/globalsearch",
				},
				{
					name: "事件",
					path: "/pages/eventList/eventList",
				},
				{
					name: "我的",
					path: "/pages/my/my",
				}
			]
		}
	},
	mounted() {
		console.log("own", uni.getStorageSync("own"))
	},
  methods: {
    switchTab(path) {
			uni.navigateTo({
				url: path
			});
    }
  }
};
</script>

<style scoped>
.custom-tab-bar {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
	color: #666;
  display: flex;
  justify-content: space-around;
  align-items: center;
	position: fixed;
	z-index: 100;
	left: 0;
	bottom: 0;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
}
.active{
	color: #1E62FC;
}
.tab-item {
	cursor: pointer;
}
</style>